<template>
  <div class="report">
    <!-- 空数据时 -->
    <div class="empy" v-if="!data.length">
      <a-row class="ta-center">
        <strong class="mg_r10">开始做</strong>
        <a-month-picker @change="changeMonth" size="default" placeholder="选择月份" />
        <strong class="mg_l10 mg_r10">工资</strong>
        <a-button type="primary" @click="openMOdal">确定</a-button>
      </a-row>
    </div>
    <!-- 内容数据 -->
    <template v-if="data.length">
      <a-row class="title" type="flex" align="middle" justify="space-between">
        <a-col>薪资计算</a-col>
        <a-col>
          <strong>{{ modal.e }} 工资报表 ({{ modal.start }} ~ {{ modal.end }})</strong>
        </a-col>
        <a-col>
          <a-button @click="record">归档</a-button>
          <a-button type="primary">新建报表</a-button>
          <a-button @click="reportHistory">归档历史</a-button>
        </a-col>
      </a-row>

      <div class="middle">
        <a-button>搜索</a-button>
        <a-button>筛选</a-button>
      </div>
      <div class="container">
        <a-table :dataSource="data" :rowKey="data => data.id">
          <a-table-column title="姓名" data-index="empName" />
          <a-table-column title="部门" data-index="depName" />
          <a-table-column title="职位" data-index="positionName" />
          <a-table-column title="基本工资" data-index="salaryBasic" />
          <a-table-column title="岗位补贴" data-index="subsidy" />
          <a-table-column title="实际出勤天数" data-index="workingDays">
            <template slot-scope="text">{{ text }}</template>
          </a-table-column>
          <a-table-column title="早退扣款" data-index="leaveDed" />
          <a-table-column title="迟到扣款" data-index="lateDed" />

          <a-table-column title="绩效奖金" data-index="businessCommission" />
          <a-table-column title="业绩提成" data-index="teamCommission" />
          <a-table-column title="个人社保" data-index="socDed" />
          <a-table-column title="个人公积金" data-index="pfDed" />
          <a-table-column title="个税" data-index="personTax" />
          <a-table-column title="应发" data-index="supplementDed" />
          <a-table-column title="实发" data-index="salaryReal" />
          <a-table-column title="操作">
            <template slot-scope="text">
              <a-button @click="showDetailss(text)">明细</a-button>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </template>
    <!-- 弹出框创建薪资报表 -->
    <a-modal destroyOnClose :width="750" :title="`新建${modal.title}报表`" :visible="visible" @ok="handleOk" @cancel="visible = false">
      <p class="ta-center">
        <span style="color:#2E0F0F">确定新建</span>
        <span class="primary">{{ modal.start }} ~ {{ modal.end }}</span>
        <span style="color:#2E0F0F">工资报表吗</span>
      </p>
    </a-modal>
    <!-- 弹出框 归档 -->
    <a-modal
      destroyOnClose
      :width="750"
      :title="`归档 ${tableDate} 报表`"
      :visible="visible2"
      @ok="handleRecord"
      @cancel="visible2 = false"
    >
      <p class="ta-center">确认归档这份报表吗?</p>
    </a-modal>
    <!-- 查看详情 -->
    <dialog-detail :show.sync="showDetail" :reportOptions="reportOptions" :detial-data="detialData"></dialog-detail>
  </div>
</template>

<script>
import { Wages, WagesSet } from "@/api/wages";
import { mapState } from "vuex";
export default {
  name: "Report",
  components: { dialogDetail: () => import("./dialog-detail") },

  data() {
    return {
      // 报表日期
      tableDate: "",
      // 计薪月份
      payMonth: 1,
      // 查看详情
      showDetail: false,
      // 详情参数
      reportOptions: {},
      visible: false,
      visible2: false,
      modal: {},
      data: [],
      detialData: {}
    };
  },
  created() {
    this.getSelectSide();
    this.getListStatus();
  },

  computed: {
    ...mapState(["hr"])
  },
  methods: {
    // 归档
    record() {
      this.visible2 = true;
    },
    // 查看详情
    showDetailss(text) {
      this.showDetail = true;
      this.reportOptions = text;
      this.getSalaryDetial(this.reportOptions);
    },
    // 查询计薪周期设置
    getSelectSide() {
      Wages({ url: WagesSet.selectSide }).then(({ data }) => {
        this.payMonth = data.payMonth;
      });
    },

    // 判断是否有列表
    getListStatus() {
      Wages({
        url: WagesSet.listWages,
        params: {
          companyId: this.hr.companyId,
          month: "01",
          year: "2020"
        }
      }).then(data => {
        if (data.data) {
          this.getWagesList();
        }
      });
    },
    getWagesList() {
      Wages({
        url: WagesSet.wagesList,
        method: "POST",
        data: {
          companyId: `932B5BB60904407FB8626B94B656AB00`,
          month: "01",
          year: "2020"
        }
      }).then(({ data }) => {
        if (data) {
          data.forEach(val => {
            val.salaryReal /= 100;
          });
          this.tableDate = `${data[0].year}-${data[0].month}`;
        }
        this.data = data;
      });
    },
    // 创建新报表
    openMOdal() {
      if (this.modal.start) {
        this.visible = true;
      } else {
        this.$warning({
          title: "选择报表月份",
          content: "粉色的星星从天空坠落...."
        });
      }
    },
    // 选择月份
    changeMonth(date, e) {
      if (date) {
        const days = e.split("-");
        const d = new Date(days[0], days[1], 0).getDate();
        this.modal = {
          title: `${e}`,
          start: `${e}-1`,
          end: `${e}-${d}`,
          date: date._d,
          e
        };
      }
    },
    // 获取月份
    getMonth(time, type = 1) {
      const date = new Date(time);
      let y = date.getFullYear();
      let m = date.getMonth();
      const d = date.getDate();
      const days = new Date(y, m, 0).getDate();
      if (type === 2) {
        if (m === 0) {
          y -= 1;
          m = 12;
        }
      } else {
        m += 1;
      }

      this.modal.start = `${y}-${m}-1`;
      this.modal.end = `${y}-${m}-${days}`;
    },
    // 生成薪资报表
    createSalary() {
      Wages({
        url: WagesSet.salaryLists,
        method: "PUT",
        data: {
          companyId: "932B5BB60904407FB8626B94B656AB00",
          month: "01",
          year: "2020"
        }
      }).then(rsp => {
        this.getSalaryLists();
      });
    },
    // 查询工资报表
    getSalaryLists() {
      Wages({
        url: WagesSet.getSalaryLists,
        method: "POST",
        data: {
          companyId: "932B5BB60904407FB8626B94B656AB00",
          month: "01",
          year: "2020"
        }
      }).then(({ data }) => {
        this.data = data;
      });
    },
    // 查看归档历史
    reportHistory() {
      this.$router.push(`/wages/report-history`);
    },

    // 确认创建
    handleOk() {
      if (this.modal.start) {
        Wages({
          url: WagesSet.getSalary,
          data: {
            companyId: this.hr.companyId,
            month: this.modal.e.split("-")[1],
            year: this.modal.e.split("-")[0]
          }
        }).then(({ data }) => {
          this.getMonth(this.modal.date, data.payMonth);
          this.createSalary();
          this.visible = false;
        });
      }
    },
    // 确认归档
    handleRecord() {
      this.visible2 = false;
      this.createSalary();
    },
    getSalaryDetial(item) {
      Wages({
        url: WagesSet.salaryDetial,
        method: "POST",
        data: {
          empId: item.empId,
          id: item.id,
          companyId: "932B5BB60904407FB8626B94B656AB00",
          month: "01",
          year: "2020"
        }
      }).then(({ data }) => {
        this.detialData = data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.empy {
  height: 400px;
  background: #fafafa;
  border-bottom: 1px solid #eee;
  width: 100%;
  padding-top: 150px;
}
.title {
  padding: 10px;
  border-bottom: 1px solid #000;
  margin-left: 36px;
}
.middle {
  padding: 12px 2px;
  border-bottom: 1px solid #000;
  margin-bottom: 20px;
  margin-left: 36px;
}
.salary-body {
  .salary-title {
    padding: 10px 0 10px 40px;
    font-weight: 600;
  }
  .ant-row-flex {
    margin-bottom: 10px;
  }
}
.foot {
  padding: 10px 50px;
  text-align: center;
}
.pos {
  position: absolute;
  top: 11px;
  right: 50px;
}
</style>
